<template>
  <div :style="backgroundStyle" class="background-container">
    <div style="background-color: rgba(255, 255, 255, 0.5); font-family: tutu">
      <div class="box1">
        <h4 @click="backList" id="back">返回列表</h4>
      </div>

      <!-- 基本信息 -->
      <h3 style="color: #6c63ff">基本信息</h3>
      <div class="form-container">
        <el-form
          ref="elForm"
          :model="register"
          size="small"
          label-width="100px"
        >
          <!-- 第一行 -->
          <el-row :gutter="20">
            <!-- 
                :span="5"    表单项的宽度
             -->
            <el-col :span="5">
              <el-form-item label="就诊姓名" prop="name">
                <el-input
                  readonly
                  v-model="register.name"
                  placeholder="请输入就诊姓名"
                  clearable
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="就诊性别" prop="field103">
                <el-radio-group v-model="register.sex">
                  <!--  :disabled="true"  禁用 -->
                  <el-radio
                    :disabled="true"
                    v-for="dict in dict.type.sys_user_sex"
                    :key="dict.value"
                    :label="dict.value"
                    >{{ dict.label }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="手机号码" prop="phone">
                <el-input
                  readonly
                  v-model="register.phone"
                  placeholder="请输入手机号码"
                  clearable
                >
                </el-input>
              </el-form-item>
            </el-col>

            <el-col :span="5">
              <el-form-item label="所属民族" prop="nation">
                <el-select
                  v-model="register.nation"
                  placeholder="请选择民族"
                  :disabled="true"
                >
                  <el-option
                    readonly
                    v-for="dict in dict.type.people_ethnic_ffiliation"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 第二行 -->
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="身份证号" prop="identityCard">
                <el-input
                  readonly
                  v-model="register.identityCard"
                  placeholder="请输入身份证号"
                  clearable
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="就诊年龄" prop="age">
                <el-input-number
                  readonly
                  v-model="register.age"
                  placeholder="就诊年龄"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="医保性质" prop="nature">
                <el-select
                  v-model="register.nature"
                  placeholder="请选择医保性质"
                  :disabled="true"
                >
                  <el-option
                    readonly
                    v-for="dict in dict.type.patient_medical_status"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="医保卡号" prop="cardnumber">
                <el-input
                  readonly
                  v-model="register.cardnumber"
                  placeholder="请输入医保卡号"
                  clearable
                >
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 保存和取消按钮 -->
          <el-row
            justify="center"
            style="padding-left: 400px; padding-top: 50px"
          >
            <el-col :span="4">
              <el-button class="button01" type="primary" @click="backResult"
                >结果回传⇨</el-button
              >
            </el-col>
          </el-row>
        </el-form>
      </div>

      <!-- 其他信息 -->
      <h3 style="color: #6c63ff; margin-top: 20px">其他信息</h3>
      <div class="form-container">
        <el-form
          ref="elForm"
          :model="register"
          size="small"
          label-width="100px"
        >
          <!-- 第一行 -->
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="联系地址" prop="address">
                <el-input
                  v-model="register.address"
                  placeholder="请输入联系地址"
                  readonly
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 第二行 -->
          <el-row :gutter="20">
            <el-col :span="11">
              <el-form-item label="门诊编号" prop="outpatientId">
                <el-input
                  v-model="register.outpatientId"
                  placeholder="请输入门诊编号"
                  readonly
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="住院编号" prop="admissionId">
                <el-input
                  v-model="register.admissionId"
                  placeholder="请输入住院编号"
                  readonly
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 第三行 -->
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="现病史历" prop="medicalhistory">
                <el-input
                  v-model="register.medicalhistory"
                  placeholder="请输入现病史历"
                  readonly
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <!-- 挂号人员信息 -->
      <h3 style="color: #6c63ff">挂号人员信息</h3>
      <div class="form-container">
        <el-form
          ref="elForm"
          :model="Consultationinformation"
          size="small"
          label-width="100px"
        >
          <!-- 第一行 -->
          <el-row :gutter="20">
            <el-col :span="11">
              <el-form-item label="体温" prop="temperature">
                <el-input
                  v-model="Consultationinformation.temperature"
                  placeholder="请输入体温"
                  readonly
                  clearable
                  :style="{ width: '100%' }"
                >
                  <template slot="append">℃</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="心率" prop="heartRate">
                <el-input
                  v-model="Consultationinformation.heartRate"
                  placeholder="请输入心率"
                  readonly
                  clearable
                  :style="{ width: '100%' }"
                >
                  <template slot="append">分/次</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 第二行 -->
          <el-row :gutter="20">
            <el-col :span="11">
              <el-form-item label="血压" prop="bloodPressure">
                <el-input
                  v-model="Consultationinformation.bloodPressure"
                  placeholder="请输入血压"
                  readonly
                  clearable
                  :style="{ width: '100%' }"
                >
                  <template slot="append">mmHg</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="呼吸" prop="breath">
                <el-input
                  v-model="Consultationinformation.breath"
                  placeholder="请输入呼吸"
                  readonly
                  clearable
                  :style="{ width: '100%' }"
                >
                  <template slot="append">分/次</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import {
  listConsultationinformation,
  getConsultationinformationByRegisterId,
} from "@/api/treatment/consultationinformation";
import { listDoctor } from "@/api/doctor/doctor";
export default {
  dicts: [
    "people_ethnic_ffiliation",
    "user_channel_status",
    "patient_medical_status",
    "sys_yes_no",
    "sys_user_sex",
  ],
  data() {
    return {
      // 患者详情对象
      register: {},
      docter: {},

      // 检查信息人员对象
      consultationinformationList: [],
      Consultationinformation: {
        id: "",
        registerId: "",
        time: "",
        height: "",
        temperature: "",
        breath: "",
        bloodPressure: "",
        weight: "",
        heartRate: "",
        pastHistory: "",
        patientTalk: "",
        presentHistory: "",
        inspectionResult: "",
      },

      backgroundImage: require("@/assets/images/bg.jpg"),

      // 查询参数
      queryParams: {
        registerId: null,
      },
    };
  },
  created() {
    // 接收页面传递过来的参数
    this.register = this.$route.query.register;
    // console.log("阿达:" + this.register.id);
    this.getConsultList();
  },
  methods: {
    /** 获取咨询信息人员列表 */
    getConsultList() {
      this.loading = true;
      this.queryParams.registerId = this.register.id;
      // console.log("阿达:11" + this.queryParams.registerId);
      // console.log(this.queryParams.registerId)
      // getConsultationinformationByRegisterId(this.queryParams.registerId).then(
      //   (response) => {
      //     this.Consultationinformation = response.data;
      //     console.log(response)
      //   }
      // );

      // 查询所有的问诊信息
      listConsultationinformation(this.queryParams.registerId).then(
        (response) => {
          this.consultationinformationList = response.rows;
          // console.log( this.consultationinformationList)
          for (var i = 0; i < this.consultationinformationList.length; i++) {
            if (
              this.queryParams.registerId ==
              this.consultationinformationList[i].registerId
            ) {
              this.Consultationinformation.id =
                this.consultationinformationList[i].id;
              this.Consultationinformation.registerId =
                this.consultationinformationList[i].registerId;
              this.Consultationinformation.time =
                this.consultationinformationList[i].time;
              this.Consultationinformation.height =
                this.consultationinformationList[i].height;
              this.Consultationinformation.temperature =
                this.consultationinformationList[i].temperature;
              this.Consultationinformation.breath =
                this.consultationinformationList[i].breath;
              this.Consultationinformation.bloodPressure =
                this.consultationinformationList[i].bloodPressure;
              this.Consultationinformation.weight =
                this.consultationinformationList[i].weight;
              this.Consultationinformation.heartRate =
                this.consultationinformationList[i].heartRate;
              this.Consultationinformation.pastHistory =
                this.consultationinformationList[i].pastHistory;
              this.Consultationinformation.patientTalk =
                this.consultationinformationList[i].patientTalk;
              this.Consultationinformation.presentHistory =
                this.consultationinformationList[i].presentHistory;
              this.Consultationinformation.inspectionResult =
                this.consultationinformationList[i].inspectionResult;
            }
          }
        }
      );
    },

    /** 获取查询医生列表列表 */
    getDocterList() {
      this.loading = true;
      listDoctor(this.queryParams).then((response) => {
        this.doctorList = response.rows;
      });
    },

    // 跳转到结果回传页面
    backResult() {
      console.log("哈哈哈" + this.register);
      // 页面跳转
      this.$router.push({
        path: "/patient/patientInfo/ResultDetails",
        query: { register: this.register },
      });
    },
    // 跳转到列表页面
    backList() {
      // 页面跳转
      this.$router.push("/patient/patientInfo");
    },
    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        // TODO 提交表单
      });
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
    },
  },
  computed: {
    // 设置动态背景样式
    backgroundStyle() {
      return {
        backgroundImage: `url(${this.backgroundImage})`,
        backgroundSize: "cover",
        backgroundPosition: "center",
        repeat: "no-repeat",
      };
    },
  },
};
</script>
<style>
.form-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* 表单项之间的间距 */
  justify-content: space-between; /* 两行对齐方式 */
  align-items: center;
}

.form-item {
  flex: 1 1 45%; /* 每个表单项占宽度的 45%，可根据需求调整 */
  min-width: 300px; /* 最小宽度，防止过小 */
}
.background-container {
  width: 100%;
  height: 100vh;
}

#back {
  color: rgb(182, 17, 163);
  font-weight: 700;
}

.box1 {
  width: 300px;
  margin-left: 1180px;
}
.button01 {
  width: 120px;
  height: 45px;
  border-radius: 10px;
  background-color: rgb(29, 175, 143);
  margin-top: 0;
  text-align: center;
  font-family: tutu;
  font-size: 18px;
  font-weight: 700;
  color: rgb(206, 132, 27);
  cursor: pointer;
}

.button01:active {
  background-color: rgba(0, 0, 0, 0.3);
  width: 200px;
  height: 100px;
  transition: all 0.5s;
}
</style>
